<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- bootstrapValidator -->
    <link rel="stylesheet" href="./assets/plugins/plugins/bootstrap-validator/bootstrapValidator.min.css">

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/plugins/mui/css/mui.min.css">

    <!-- city-picker -->
    <link rel="stylesheet" href="./assets/plugins/plugins/city-picker/city-picker.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/UserProfile.less" />
    <style>
        .city-picker-span{
            width: 100%!important;
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
        <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <!-- <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color"></a> -->
        <h1 class="mui-title">基本资料</h1>
    </header>
    <div style="height: 44px;"></div>
    <!-- 用户信息 -->
    <div class="user">
        <div class="avatar wow fadeInUp">
            <img src="./assets/images/avatar.png" style="width: 100%; height: 100%;"/>
        </div>
    </div>

    <form class="profile wow fadeInUp" id="onProfile" data-wow-delay="200ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">手机号</label>
            <input type="mobile" class="form-control" id="mobile" placeholder="请输入手机号" required />
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="密码为空即不修改" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender">
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div class="form-group" style="position: relative;">
            <label for="region">选择地区</label>
            <input type="text" class="form-control" id="region" readonly placeholder="请选择地区" data-toggle="city-picker" required />
        </div>

        <div class="form-group" >
            <label for="address">详细地址</label>
            <input type="text" class="form-control" name="address" id="address" placeholder="请输入详细地址" required />
        </div>

        <!-- 上传框 -->
        <input type="file" name="avatar" id="avatar" style="display: none;">


        
        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- bootstrapValidator -->
<script src="./assets/plugins/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/plugins/mui/js/mui.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/plugins/axios/axios.min.js"></script>

<script src="./assets/plugins/plugins/axios/request.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<script src="./assets/plugins/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/plugins/city-picker/city-picker.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/plugins/cookie.js"></script>

<!-- login -->
<script src="./assets/js/login.js"></script>

<!-- <script src="./assets/plugins/plugins/login.js"></script> -->


<script>
    //实例化wow.js
    new WOW().init()

    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

    if(JSON.stringify(business) !== '{}')
    {
        $('.avatar img').attr('src',business.avatar);
        $('#mobile').val(business.mobile);
        $('#nickname').val(business.nickname);
        $('#address').val(business.address);
        $('#gender').val(business.gender);
        
        $('#region').citypicker('reset');
        $('#region').citypicker('destroy');
        $('#region').citypicker({
            province: business.province,
            city: business.city,
            district: business.district
        });

    }

    $('.avatar img').click(function(){
        $('#avatar').click();
    });

    $('#avatar').change(function(){
        let file = $(this)[0].files[0];
        // console.log(file);


        if(file)
        {
            let Reader = new FileReader();

            Reader.readAsDataURL(file);

            Reader.onload = function()
            {
                $('.avatar img').attr('src',Reader.result);
            }
        }
    });


     // 实例化表单验证插件
     $('#onProfile').bootstrapValidator({
        // 填写配置项
        message:'表单内容不能为空',// 所有字段默认错误信息
        // 字段校验图标。默认bootstrap图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        // 需要验证的字段
        fields:{
            nickname:{
                validators: {
                    notEmpty: { // 非空校验
                        message: '姓名不能为空'
                    }
                }
            },
            address:{
                validators:{
                    notEmpty: { // 非空校验
                        message: '详细地址不能为空'
                    },
                }
            }
        }
    }).on('success.form.bv',function(e){
        // 阻止多次提交
        e.preventDefault();
    });

    $('#onProfile').on('submit',async function(){
        // 如果验证不过就不执行后面代码 data => js dateset
        if(!$('#onProfile').data('bootstrapValidator').isValid())
        {
            // 重置表单
            // $('#onProfile').data('bootstrapValidator').resetForm();
            return;
        }

        let data = {
            id:business.id,
            nickname:$.trim($('#nickname').val()),
            mobile:$.trim($('#mobile').val()),
            gender:$('#gender').val(),
            address:$.trim($('#address').val())
        }

        // 处理密码
        let password = $.trim($('#password').val());

        if(password)
        {
            data.password = password;
        }

        // 处理头像
        let avatar = $('#avatar')[0].files[0];

        if(avatar)
        {
            data.avatar = avatar;
        }

        // 处理地区
        let citypicker = $('#region').data("citypicker");
        let code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        // console.log(code);
        // return;
        if(!code)
        {
            mui.toast('请选择地区');
            return;
        }

        data.region = code;
        console.log(data);
        // return;
        let result = await UPLOAD({
            url:'business/profile',
            params:data
        });

        if(result && result.code === 1)
        {
            cookie.set('business',JSON.stringify(result.data));

            mui.toast(result.msg);

            setTimeout(() => {
                location.href = 'UserIndex.html';
            },2000);

            return;
        }else{
            mui.toast(result.msg);

            return;
        }
    });

</script>